<template>
    <div>
        <div style="background-color: #fff8e1; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #FFC107;">
            <h3 style="color: #F57F17; margin-top: 0;">✅ 技术解释：表单验证侦听器</h3>
            <p><strong>实时验证：</strong>使用侦听器监听输入字段变化，实现实时表单验证，提升用户体验。</p>
            <p><strong>immediate 选项：</strong>设置为true使侦听器在组件初始化时立即执行，确保初始状态也被验证。</p>
            <p><strong>条件渲染错误信息：</strong>结合v-if指令根据验证结果动态显示错误提示信息。</p>
            <p><strong>多字段独立验证：</strong>为不同字段设置独立的侦听器和错误状态，实现精确的验证控制。</p>
        </div>
        <input type="text" v-model="username" />
        <p v-if="usernameError" style="color: red;">{{ usernameError }}</p>
        <br/>
        <input type="password" v-model="password" />
        <p v-if="passwordError" style="color: red;">{{ passwordError }}</p>
    </div>
</template>
<script>
export default{
    data() {
        return {
            username : '',
            password : '',
            usernameError : '',
            passwordError : '',
        };
    },
    watch:{
        username(newValue){
            if(newValue.length < 5){
                this.usernameError = '用户名长度至少为5字符';
            }else{
                this.usernameError = '';
            }
        },
        password(newValue){
            if(newValue.length < 8){
                this.passwordError = '密码长度至少为8个字符';
            }else{
                this.passwordError = '';
            }
        },
        immediate: true
    },
};
</script>